<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    {{ list }}
  </div>
</template>

<script lang="ts">
import {
  ref,
  reactive,
  provide,
  inject,
  nextTick,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";
import { Regions } from "@/API/api";
import HelloWorld from "@/components/HelloWorld.vue";

async function getRegionList() {
  const { ctx }: any = getCurrentInstance();
  await ctx.$store.dispatch("app/GET_REGIONS_LIST");
  return ctx.$store.state.app.regionsList;
}

export default defineComponent({
  name: "about",
  components: {
    HelloWorld,
  },
  setup() {
    const data = reactive({
      list: [],
    })
    onMounted(async () => {
      data.list = await getRegionList();
    })
    return data;
  },
});
</script>
